<template>
  <div class="combination-add-chunk3">
    <div class="card">
      <div class="title">方案优化</div>
      <div class="content">
        <div class="chunk">
          <chart1 id="combinationChunk3Chart1" :data="[chunk3_data.body.yearVolity, chunk3_data.body.yearIncom]" height="400px" width="100%" />
        </div>
        <div class="chunk">
          <p class="sunTitle">方案列表</p>
          <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="[chunk3_data.body]"
              stripe fit
              size="mini"
              :cell-style="{padding: '6px 0'}"
              :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            >
            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
            <el-table-column prop="yearIncom" label="年化收益率" align="center" min-width="80">
              <template slot-scope="{row}">
                <span v-if="row.yearIncom" :class="row.yearIncom>=0?'positiveFc':'negativeFc'">
                  {{ row.yearIncom }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="yearVolity" label="年化波动率" align="center" min-width="80">
              <template slot-scope="{row}">
                <span v-if="row.yearVolity">
                  {{ row.yearVolity }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="sharpeRate" label="夏普比率" align="center" min-width="90"></el-table-column>
            <el-table-column :label="key" v-for="(item, key, i) in chunk3_data.body.maps" :key="i" align="center" min-width="200">
              <template><span>{{ item }}</span></template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="title">
        <span>方案1</span>
        <el-button size="mini" type="primary" @click="getNewNetWorthValue" style="height: 28px;">保存</el-button>
      </div>
      <div class="content">
        <div class="chunk1">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            stripe fit
            size="mini"
            :cell-style="{padding: '6px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%;"
          >
            <el-table-column prop="strategyName" label="产品名称"></el-table-column>
            <el-table-column prop="cumulativeAnnualizedIncome" label="累计年化收益" align="center"></el-table-column>
            <el-table-column prop="cumulativeAnnualizedFluctuation" label="累计年化波动" align="center"></el-table-column>
            <el-table-column prop="maxDown" label="最大回撤" align="center"></el-table-column>
            <el-table-column prop="investContacts" label="配置权重(%)" align="center">
              <template slot-scope="{$index}">
                <el-input-number v-model="weight_list[$index].weight" style="width: 70px" label="haha" @input="weightHandleChange($index)" :min="0" :max="100" :precision="2" size="mini" :controls="false"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer">
            <div></div>
            <div class="progress">
              剩余可用仓位：<el-progress :percentage="have_weight"></el-progress>
            </div>
          </div>
        </div>
        <div class="chunk1">
          <chart2 v-if="list_netWorthLine.length&&Object.keys(contrastIndex_obj).length" id="combinationChunk3Chart2" :has_dataZoom="false" :data="list_netWorthLine" :contrastIndex_obj="contrastIndex_obj" :key="chart1_key" height="350px" width="100%" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import chart1 from '@/components/Charts/combination_add_chunk3_1.vue'
import chart2 from '@/components/Charts/combination_add_chunk4_1.vue'
import { findIndexByIndexTypeAndIndexTime } from '@/api/policyManage'
import { getRiskParityPortfolioList, getNewNetWorthValue } from '@/api/combination'

export default {
  components: { chart1, chart2 },
  props: {
    base_contrast_name: {
      type: String,
      default: ''
    },
    base_contrast: {
      type: Number,
      required: true
    },
    strategyId: {
      type: String | Number,
      default: 100001
    },
    userId: {
      type: String | Number,
      required: true
    },
    startTime: {
      type: String,
      required: true
    },
    chunk3_data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    chunk1_res: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      listLoading: false,
      list: [],

      weight_list: [],
      have_weight: 100,
      
      // 方案1
      list_netWorthLine: [],
      contrastIndex_obj: {},
      chart1_key: 1,
    }
  },
  created() {
    Object.keys(this.chunk3_data.body.maps).forEach((key, i) => {
      const val = this.chunk3_data.body.maps[key]
      this.have_weight = Number((this.have_weight-val).toFixed(2))
      this.weight_list.push({
        strategyId: this.chunk1_res[i],
        weight: val
      })
    })
    this.getNewNetWorthValue()
    this.getRiskParityPortfolioList()
  },
  methods: {
    weightHandleChange(i) {
      let total = 0
      this.weight_list.forEach(item => {
        total += item.weight
        // total = add(total + item.weight)
      })
      if(total > 100) {
        this.$message({
          message: '超出最大权重',
          type: 'warning',
          duration: 2 * 1000
        })
        this.$nextTick(() => {
          this.have_weight = 0
          this.weight_list[i].weight = this.weight_list[i].weight - (total-100)
        })
      }else {
        this.have_weight = Number((100 - total).toFixed(2))
      }
    },
    getRiskParityPortfolioList() {
      getRiskParityPortfolioList(this.chunk1_res).then(res => {
        console.log('列表', res)
        this.list = res
      })
    },
    // 方案曲线
    getNewNetWorthValue() {
      getNewNetWorthValue(this.weight_list).then(res => {
        console.log('方案曲线', res)
        this.list_netWorthLine = res.body
        this.$emit('enterTime', res.body[res.body.length-1].networthTime)
        this.findIndexByIndexTypeAndIndexTime()
      })
    },
    // 方案曲线 对比指标 
    findIndexByIndexTypeAndIndexTime() {
      findIndexByIndexTypeAndIndexTime({
        startTime: this.startTime,
        endTime: parseTime(new Date()),
        indexType: [this.base_contrast]
      }).then(res => {
        console.log('方案曲线 对比指标', res)
        this.contrastIndex_obj = {}
        Object.keys(res.body).forEach(key => {
          const item = res.body[key]
          this.contrastIndex_obj[this.base_contrast_name] = item
        })
        this.chart1_key++
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.combination-add-chunk3 {
  .card {
    height: 500px;
    border: 1px solid #ccc;
    &:nth-child(2) { height: 400px; }
    & + .card { margin-top: 12px; }
    .title {
      padding: 0 10px;
      line-height: 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f1f0f0;
      border-bottom: 1px solid #ccc;
    }
    .content {
      padding: 5px;
      display: flex;
      justify-content: space-between;
      .chunk {
        width: 49.5%;
        height: 446px;
        .sunTitle {
          line-height: 40px;
          font-weight: bold;
        }
      }
      .chunk1 {
        width: 49.5%;
        height: 350px;
        border: 1px solid #ccc;
        position: relative;
        .footer {
          width: 100%;
          display: flex;
          justify-content: space-between;
          position: absolute;
          bottom: 10px;
          font-size: 12px;
          > div { width: 350px; }
          .progress {
            width: 270px;
            display: flex;
            ::v-deep .el-progress {
              flex: 1;
              .el-progress__text { font-size: 12px !important; }
            }
          }
        }
      }
    }
  }
}
</style>

